<template>
  <!--切换弹窗-->
  <van-action-sheet v-model:show="show" title="切换就诊人">
    <div>
      <p style="text-align: left;margin-left: 10px;font-weight: bold;">就诊卡</p>
      <van-radio-group v-model="checked">
        <van-cell-group inset>
          <template v-for="card in patientCard" :key="card.patientId">
            <van-cell class="patientCardContainer" clickable @click="handleCardSelection(card.patientId, card)">
              <template #title>
                <p class="card-title-text">{{ card.pname }}</p>
              </template>
              <template #right-icon>
                <van-radio :name="card.patientId"/>
              </template>
              <template #label>
                <p class="card-label-text">南昌大学第二附属医院</p>
                <p class="card-label-text">{{ card.idCardNumber }}</p>
              </template>
            </van-cell>

          </template>
        </van-cell-group>
      </van-radio-group>
    </div>
  </van-action-sheet>
  <van-space style="margin-top: 50px;" direction="vertical" fill>
    <van-row justify="space-around">
      <van-col span="10">
        <van-button class="registered-button" block to="/DepartmentList">
        </van-button>
      </van-col>

      <van-col span="10">
        <van-button class="records-button" block to="/AppointmentList">
        </van-button>
      </van-col>
    </van-row>

    <div style="margin-top: 20px">
      <van-cell-group inset class="patientCardContainer" @click="popEvents">
        <van-cell center="center" size="large"  is-link style="font-size:1.2em">
          <template #title>
            <p style="text-align: left;line-height: 0;font-weight: bold;font-size: 1.2em">
              {{ selectedPatient.pname }}</p>
          </template>
          <template #label>
            <p style="text-align: left;line-height: 1.5;font-weight: bold;font-size: 1.2em">
              就诊号：{{ selectedPatient.idCardNumber }}</p>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <!--    <van-button type="primary" block to="/DepartmentList">科室列表</van-button>-->
    <!--    <van-button type="primary" block to="/ConfirmAppointment">确实订单</van-button>-->
    <!--    <van-button type="primary" block to="/AppointmentList">预约列表</van-button>-->
    <!--    <van-button type="primary" block to="/PatientManagement">就诊人管理</van-button>-->
    <!--    <van-button type="primary" block to="/AddPatient">添加就诊人</van-button>-->
    <!--    <van-button type="primary" block to="/ViewQueue">查看排队位次</van-button>-->
    <!--    <van-button type="primary" block to="/AppointmentDetail">查看订单详情</van-button>-->
  </van-space>
  <van-grid style="margin-top: 20px;width: 100%;" clickable column-num="3">
    <van-grid-item icon="photo-o" text="挂号记录"/>
    <van-grid-item icon="photo-o" block to="/AddPatient" text="添加就诊人"/>
    <van-grid-item icon="photo-o" block to="/PatientManagement" text="就诊人管理"/>
    <van-grid-item icon="photo-o" text="预约记录"/>
    <van-grid-item icon="photo-o" text="文字"/>
  </van-grid>
  <van-swipe style="width: 100%;height: 200px;margin-top: 20px" :autoplay="3000" lazy-render>
    <van-swipe-item v-for="image in images" :key="image">
      <img style="width: 90%; height: 200px" :src="require(`@/assets/images/${image}`)" />
    </van-swipe-item>
  </van-swipe>
  <UnderTabbar></UnderTabbar>
</template>
<script setup>
import UnderTabbar from '../components/UnderTabbar.vue'
import {PatientService} from "@/api/api";
import {onBeforeMount, ref} from "vue";
const show = ref(false);
const checked = ref();
const isDataLoaded = ref(false);
const images = [
  'swipe1.png',
  'swipe2.png',
];
const selectedPatient = ref(
    {
      pname: "未获取数据",
      telNumber: "未获取数据",
      idCardNumber: "未获取数据"
    }
);// 选中的病人
let patientCard = ref([
  {
    patientId: "-1",
    pname: "未获取数据"
  }
]); // 存储病人数据的响应式数组

onBeforeMount(async () => {
  await loadData(); // 在页面加载完成后调用加载数据的方法
});

async function loadData() {
  try {
    const loginId = '1'; // 替换为实际的 loginId 值
    const response1 = await PatientService.patientList(loginId);
    // 获取响应数据
    selectedPatient.value = response1.data[0]; // 将响应数据存储在 patientCard 变量中
    checked.value = response1.data[0].patientId;

    isDataLoaded.value = true;
  } catch (error) {
    console.error(error); // 处理错误
  }
}

const handleCardSelection = (patientId, patientCard) => {
  checked.value = patientId;
  selectedPatient.value = patientCard;
};
const popEvents = async () => {
  console.log(checked.value);
  try {
    const loginId = '1'; // 替换为实际的 loginId 值
    const response = await PatientService.patientList(loginId);
    // 获取响应数据
    patientCard = response.data; // 将响应数据存储在 patientCard 变量中
    // console.log(response.data); // 输出结果
    show.value = true;
  } catch (error) {
    console.error(error); // 处理错误
  }
};
</script>

<style scoped>
.registered-button {
  width: 100%;
  height: 110px;
  border-radius: 10px; /* 设置圆角 */
  background-image: url('@/assets/images/Registered.jpg');
  background-size: cover; /* 背景图片等比例缩放填充 */
}

.records-button {
  width: 100%;
  height: 110px;
  border-radius: 10px; /* 设置圆角 */
  background-image: url('@/assets/images/Records.jpg');
  background-size: cover; /* 背景图片等比例缩放填充 */
}

.patientCardContainer {
  --van-cell-value-color: rgb(79, 156, 245);
}

.card-title-text {
  text-align: left;
  line-height: 0.8;
  font-weight: bold;
  font-size: 1.5em;
}

.card-label-text {
  text-align: left;
  line-height: 0.8;
  color: white;
  font-size: 1.2em;
}

.patientCardContainer {
  background-image: url('~@/assets/images/patientCard.png'); /* 图片路径 */
  background-size: cover;
  margin-bottom: 10px;
}
</style>